<template >
  <!-- 组件结构 -->
  <div class="demo">
    <h1>学校名称：{{ name }}</h1>
    <h2>学校位于：{{ address }}</h2>
    <button @click="show">点我显示学校名字</button>
  </div>
</template>

<script>
// 交互代码

// 创建school组件
// export const school = Vue.extend({  分别暴露

//  const school = Vue.extend({

// })

export default {
  name: "school",
  data() {
    return {
      name: "SWPU",
      address: "Beijing",
    };
  },
  methods: {
    show() {
      console.log("SwPU");
    },
  },
}; // 默认暴露

// export {school }  //分别暴露
</script>

<style>
/* 组件样式 */
.demo {
  background-color: rgb(201, 169, 109);
}
</style>